<template>
  <el-dialog
    title="修改人员"
    v-model="dialogVisible"
    width="80%"
    top="10vh"
    height="80vh"
    :destroy-on-close="true"
    draggable
    :close-on-click-modal="false"
    @close="dialogVisible = false"
  >
    <div class="t-box">
      <div class="table-box">
        <div class="title">待添加人员:</div>
        <ProTable
          ref="leftDataGridRef"
          :request-auto="false"
          :search-col="2"
          :init-param="leftDataGrid.initParam"
          :columns="leftDataGrid.columns"
          :request-api="userRolePageUserByNoRole"
          :data-callback="tableDataCallback"
        >
          <template #tableHeader>
            <GlobalButton :button-list="leftDataGrid.headButtonList"></GlobalButton>
          </template>

          <template #operation="{ row }">
            <GlobalButton :button-list="leftDataGrid.rowButtonList" :row-params="row"></GlobalButton>
          </template>
        </ProTable>
      </div>
      <div class="table-box">
        <div class="title">已添加人员:</div>
        <ProTable
          ref="rightDataGridRef"
          :search-col="2"
          :request-auto="false"
          :init-param="rightDataGrid.initParam"
          :columns="rightDataGrid.columns"
          :data-callback="tableDataCallback"
          :request-api="userRolePageUserByRole"
        >
          <template #tableHeader>
            <GlobalButton :button-list="rightDataGrid.headButtonList"></GlobalButton>
          </template>

          <template #operation="{ row }">
            <GlobalButton :button-list="rightDataGrid.rowButtonList" :row-params="row"></GlobalButton>
          </template>
        </ProTable>
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { useDataGrid } from './hooks/use-dataGrid';
import { userRolePageUserByRole, userRolePageUserByNoRole } from '$api/auth/user';
import { ProTableInstance } from '@/components/ProTable/interface';

interface UpdateRoleUserProps {
  tableRef: ProTableInstance;
}
const props = withDefaults(defineProps<UpdateRoleUserProps>(), {
  tableRef: null
});

const leftDataGridRef = ref<ProTableInstance>();
const rightDataGridRef = ref<ProTableInstance>();

let dialogVisible = ref(false);
/**
 * 打开弹框
 */
const open = () => {
  dialogVisible.value = true;
  const roleId = props.tableRef.clickRow.id;

  nextTick(() => {
    rightDataGrid.initParam.roleId = roleId;
    leftDataGrid.initParam.roleId = roleId;
  });
};

const refresh = () => {
  leftDataGridRef.value?.getTableList();
  rightDataGridRef.value?.getTableList();
  props.tableRef.getTableList();
};

const { dataGrid: leftDataGrid, tableDataCallback } = useDataGrid('left', leftDataGridRef, refresh);
const { dataGrid: rightDataGrid } = useDataGrid('right', rightDataGridRef, refresh);

defineExpose({
  open
});
</script>

<style lang="scss" scoped>
.t-box {
  display: flex;
  flex-direction: row !important;
  justify-content: space-between;
  height: 70vh;
  .title {
    display: flex;
    align-items: center;
    height: 35px;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
  }
  > div:nth-of-type(1) {
    margin-right: 10px;
  }
  > div:nth-of-type(2) {
    margin-left: 10px;
  }
  > div {
    width: 30% !important;
    height: 100%;
  }
}
</style>
